<template>
  <!-- 组件根标签 -->
  <div class="market">
    <!-- <h2>我是刷题</h2> -->
    <hmnavbar title="刷题模块" @back="$router.push('/find')"></hmnavbar>
    <!-- 下拉菜单 -->
    <van-dropdown-menu class="caidan">
      <van-dropdown-item :title="selCity" ref="mycity">
        <!-- 搜索框 -->
        <van-search v-model="cityVal" placeholder="请输入搜索关键词" />
        <!-- 索引栏 -->
        <van-index-bar>
          <template v-for="(value, key) in cityList"
            ><van-index-anchor :index="key" :key="key" />
            <van-cell
              @click="changeCity(item)"
              v-for="(item, index) in value"
              :key="index"
              :title="item[0]"
            ></van-cell>
          </template>
        </van-index-bar>
      </van-dropdown-item>
      <van-dropdown-item :title="selPosition" ref="myposition">
        <van-cell
          @click="changePostion(item)"
          v-for="(item, index) in positionList"
          :key="index"
          :title="item"
        ></van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 图标结构 -->
    <div class="tubiao">
      <h3>工资收入</h3>
      <canvas id="myChart" width="375" height="260"></canvas>
    </div>
  </div>
</template>
<script>
import { getIndexesApi, getDataApi } from './../../../api/market'
import F2 from '@antv/f2'
export default {
  data () {
    return {
      value1: '北京',
      value2: '技术经理',
      cityVal: '请输入想要搜索的城市',

      // 请求的城市索引数据
      cityList: {},
      // 默认城市
      selCity: '',
      // 当前城市下的岗位列表
      positionList: '',
      // 默认岗位
      selPosition: '',

      // 绘制的图表对象
      gzchart: '',

      // 图标工资的数据源
      percentSalary: []
    }
  },

  async created () {
    // 发起城市索引的请求
    const res = await getIndexesApi()
    console.log(res)
    this.cityList = res.data.data

    // 设置默认值
    // 默认城市
    this.selCity = this.cityList['热门'][0][0]
    // 当前城市下的岗位列表
    this.positionList = this.cityList['热门'][0][1]
    // 默认岗位
    this.selPosition = this.cityList['热门'][0][1][0]

    // 得到所有的图表统计数据
    this.getData()
  },

  // DOM元素渲染完成后执行的钩子
  mounted () {
    // 为了确保DOM可以获取到,使用$nextTick
    this.$nextTick(() => {
      this.initdraw()
    })
  },

  methods: {
    // 得到所有的图表数据方法
    async getData () {
      const res = await getDataApi({
        city: this.selCity,
        position: this.selPosition
      })
      // 保存工资收入的数据源
      this.percentSalary = res.data.data.percentSalary
      // 绘制工资收入
      this.drawGongzi()
    },

    // 图标初始化的方法
    initdraw () {
      this.gzchart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio
      })
    },

    // 图形表格的方法
    drawGongzi () {
      // 将之前绘制的图形清除掉
      this.gzchart.clear()

      // 将数据源中一俺家一条 a:1的元素
      this.percentSalary.forEach(item => {
        item.a = '1'
      })

      const map = {}
      this.percentSalary.forEach(function (obj) {
        map[obj.assetType] = obj.percent + '%'
      })

      this.gzchart.source(this.percentSalary, {
        percent: {
          formatter: function formatter (val) {
            return val + '%'
          }
        }
      })
      this.gzchart.tooltip(false)
      this.gzchart.legend({
        position: 'right',
        itemFormatter: function itemFormatter (val) {
          return val + '    ' + map[val]
        }
      })
      this.gzchart.coord('polar', {
        transposed: true,
        innerRadius: 0.7,
        radius: 0.85
      })
      this.gzchart.axis(false)
      this.gzchart
        .interval()
        .position('a*percent')
        .color('assetType', ['#FE5D4D', '#3BA4FF', '#737DDE'])
        .adjust('stack')

      this.gzchart.guide().html({
        position: ['50%', '45%'],
        html: `<div style="width: 250px;height: 40px;text-align: center;">
      <div style="font-size: 16px">总资产</div>
      <div style="font-size: 24px">133.08 亿</div>
    </div>`
      })
      this.gzchart.render()
    },

    // 1.修改岗位
    changePostion (item) {
      this.selPosition = item
      // 关闭下拉菜单
      this.$refs.myposition.toggle()
      // 重新获得数据
      this.getData()
    },

    // 2.修改城市
    changeCity (item) {
      // 保存当前切换的城市
      this.selCity = item[0]
      // 保存当前切换的城市对应的岗位列表
      this.positionList = item[1]
      // 修改当前城市下的选中岗位
      this.selPosition = this.positionList[0]
      // 关闭下拉框菜单
      this.$refs.mycity.toggle()
      // 重新获得数据
      this.getData()
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
.market {
  .caidan {
    /deep/ .van-search__content.van-search__content--square {
      background-color: #f7f4f5;
      border-radius: 20px;
    }
    /deep/ .van-index-anchor {
      background-color: #f7f4f5;
    }
  }
}
</style>
